<!--
  湖北11选5投注页
-->
<template>
  <div class="fixed-header fixed-footer">
    <x-header>订单详情
      <a slot="right" @click="screenshot"><i class="iconfont icon-share font-xxxl"></i></a>
    </x-header>
    <div class="bg-white py-3">
      <div class="flex-middle px-2">
        <img class="img-xl" :src="order.icon">
        <strong class="font-xl" v-text="order.lotteryName"></strong>
        <span class="text-grey ml-2">{{order.lotteryNo}}期</span>
        <img class="img-xl ml-auto" src="../../assets/img/order/win.png" v-if="order.status > 9">
        <img class="img-xl ml-auto" src="../../assets/img/order/lose.png" v-else-if="order.status == 8">
        <img class="img-xl ml-auto" src="../../assets/img/order/wait.png" v-else-if="[4, 5, 7].includes(order.status)">
      </div>
      <div class="text-center">
        <h3 v-text="order.statusText"></h3>
        <i class="text-grey" v-if="order.statusTips">（{{order.statusTips}}）</i>
      </div>
    </div>
    <div class="p-3" v-if="order.results">
      <strong class="mr-4">开奖号码</strong>
      <em class="text-red spacing-sm" v-html="stringify(order.results)"></em>
    </div>
    <div class="p-3" v-else>
      <strong class="mr-4">预计开奖</strong>
      <i v-text="order.finishTime"></i>
    </div>
    <div class="bg-white p-3">
      <div class="mb-3">
        <i class="text-grey mr-4">方案内容</i>{{order.bets}}注{{order.times}}倍，方案金额{{order.amount}}元
      </div>

      <div class="text-right" v-if="order.status > 3 && order.status != 6">
        <router-link :to="'/tickets?id=' + order.id">出票成功，出票明细 ></router-link>
      </div>
    </div>
    <div class="p-3 text-light">
      <div class="d-flex"><i class="mr-4 nowrap">订单编号</i>{{order.orderNo}}</div>
      <div class="d-flex"><i class="mr-4 nowrap">下单时间</i>{{order.createTime}}</div>
      <div class="d-flex" v-if="order.payDetail"><i class="nowrap">支付信息</i><i class="pl-4">{{order.payDetail}}</i></div>
      <div class="d-flex" v-if="order.reminder"><i class="nowrap">温馨提示</i><i class="pl-4">{{order.reminder}}</i></div>
    </div>

    <footer class="d-flex bg-white p-2" v-if="order.status == 0">
      <a class="btn btn-grey mr-auto" @click="cancel">取消订单</a>
      <a class="btn btn-danger" @click="pay">继续提交</a>
    </footer>
    <footer class="d-flex bg-white p-2" v-else>
      <a class="btn btn-danger mr-auto" @click="recommit">提交本号码</a>
      <a class="btn btn-danger" @click="jump('/daletou')">继续选择本彩种</a>
    </footer>
  </div>
</template>

<script>
import { get, id, set } from '../../utils/stoage'
import { back, jump } from '../../router'
import xHeader from '../widgets/header'
import http from '../../http'

export default {
  components: {xHeader},
  name: 'order',
  beforeRouteEnter (to, from, next) {
    http.post('/user/betDetail', {orderId: to.query.id}).then(o => {
      next(vm => {
        vm.order = o
      })
    })
  },
  data: () => ({
    order: {}
  }),
  methods: {
    screenshot () {
      this.$toast('invoke://screenshot')
      location = 'invoke://screenshot'
    },
    recommit () {
      var {lotteryType, betContent} = this.order
      var cart = get(lotteryType + '.cart', [])
      var items = betContent.map(b => {
        var item = {
          bold: b.bold,
          bets: b.bets,
          id: id()
        }
        var [[q, w], [e, r]] = b.content.split('|').map(s => s.split('*').map(b => b.split(',').map(n => parseInt(n))))
        if (b.bold) {
          item.groups = r ? [q, w, e, r] : [q, w, r, e]
        } else {
          item.groups = [q, e]
        }
        return item
      })
      set(lotteryType + '.cart', cart.concat(items))
      this.$router.replace('/' + lotteryType + '/cart')
    },
    stringify (str) {
      var [q, r] = str.split('|').map(e => e.split(','))
      return '<b>' + q.join(' ') + '</b><a class="ml-3">' + r.join(' ') + '</a>'
    },
    cancel () {
      http.post('/order/delOrder', {orderId: this.order.id}).then(res => {
        this.$toast(res.msg || '取消订单成功')
        jump('/orders')
      })
    },
    pay () {
      var o = this.order
      if (this.app) {
        location = `checkout://orderId=${o.id}&amount=${o.amount}&lotteryType=${o.lotteryType}`
        return
      }
      http.post('/order/payOrder', {orderId: o.id}).then(() => {
        this.$store.dispatch('fetch')
        this.$dialog.alert({
          title: '支付成功',
          message: '该订单已支付成功'
        }).then(() => [
          this.$router.replace('/daletou')
        ])
      })
    },
    back,
    jump
  }
}
</script>
